<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/myjs.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        #container {
            display: flex;
        }

        .form-control {
            width: 150px;
            display: inline-block;
        }

        .big {
            width: 300px;
        }

        #result {
            color: gray;
            float: right;
        }

        .showCount {
            color: red;
            font-size: 20px;
            font-weight: bold;
        }

        .table tr {
            text-align: center;
        }

        #bookAdd {
            width: 730px;
        }

        #bookShow {
            flex: 1;
        }
        .table td{
            padding:4px;
        }
    </style>
</head>
<body>
<div id="docQuery">
    <div>
        <form id="queryForm">
            籍贯：<input name="grand" id="grand" class="form-control">
            &nbsp;&nbsp;朝代：<input name="dynName" id="dynName" class="form-control">
            &nbsp;&nbsp;姓、名、字：<input name="docName" id="docName1" class="form-control">
            &nbsp;&nbsp;<input type="button" id="btnQuery" class="btn btn-primary" value="查询">
        </form>
    </div>
    <table class="table table-hover">
        <tr class="table-active">
            <td>编号</td>
            <td>朝代</td>
            <td>省</td>
            <td>市</td>
            <td>县</td>
            <td>姓名</td>
            <td>操作</td>
        </tr>
        <tbody id="tbdoc"></tbody>
    </table>
    <nav aria-label="Page navigation example">
        <ul class="pagination"></ul>
    </nav>
</div>
<script>
    function findDoctor(page,size) {
        $.get(
            '/doctor/findDoctor',
            $("#queryForm").serialize()+"&page="+page+"&size="+size,
            function (pageInfo) {
                let tb=$("#tbdoc");
                tb.empty();
                let dlist=pageInfo.list;
                for(let i in dlist){
                    let tr=`<tr>
                                   <td>${dlist[i].docId} </td>
                                   <td>${dlist[i].dynName} </td>
                                   <td>${dlist[i].provName} </td>
                                   <td>${dlist[i].city} </td>
                                   <td>${dlist[i].county} </td>
                                   <td>${dlist[i].docName}</td>
                                    <td><button type="button" onclick="performDoc(${dlist[i].docId},'${dlist[i].docName}')"
                                    class="btn btn-primary" data-toggle="modal" data-target="#docModal">添加医籍</button>
                                    </td>
                                </tr>`;
                    tb.append(tr);
                }
                let liFirst=pageInfo.isFirstPage?"":`<li class="page-item"><a class="page-link" href="javascript:findDoctor(${page-1},${size})">上一页</a></li>`;

                let li="";
                for(let i in pageInfo.navigatepageNums) {
                    let pn=pageInfo.navigatepageNums[i];
                    li += `<li class="page-item"><a class="page-link" href="javascript:findDoctor(${pn},${size})">${pn}</a></li>`
                }
                let liLast=pageInfo.isLastPage?"":`<li class="page-item"><a class="page-link" href="javascript:findDoctor(${page+1},${size})">下一页</a></li>`;
                $(".pagination").empty();
                $(".pagination").append(liFirst+li+liLast);
                $("#pageCount").html(pageInfo.pages);
                $("#listCount").html(pageInfo.total);
            },'json'
        );
    }

    function performDoc(docId,docName){
        $("#fk_docId").val(docId);
        $("#docName").val(docName);
    }

    function checkBook(){
        let bookName=$('#bookName').val();
        if(bookName!=null && bookName!=''){
            $.get(
                "/book/checkBook",
                {bookName:bookName},
                function (blist){
                    console.log(bookName,blist);
                    if(blist.length>0){
                        let book=blist[0];
                        let msg=`已经有${book.dynName}朝/${book.city}的${book.docName}著有《${book.bookName}》`;
                        showMsg(msg,"重复提示！");
                    }
                },
                'json'
            );
        }
    }
</script>
<div id="container">
    <div id="bookAdd">
        <form id="bookForm" method="post">
            <input type="hidden" name="fk_docId" id="fk_docId">
            <table class="table table-hover" >
                <tr>
                    <td>医家姓名：</td>
                    <td>书名：</td>
                    <td>册数：</td>
                    <td>出版年份：</td>
                </tr>
                <tr>
                    <td> <input type="text" id="docName" class="form-control" readonly></td>
                    <td> <input name="bookName" id="bookName" class="form-control"> </td>
                    <td> <input type="number" name="volume" class="form-control"></td>
                    <td> <input type="text" name="pubYear" class="form-control"></td>
                </tr>
                <tr>
                    <td colspan="2">简介：</td>
                    <td colspan="2">备注：</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <textarea rows="8" cols="40" name="introduce"></textarea>
                    </td>
                    <td colspan="2">
                        <textarea rows="8" cols="40" name="memo"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <input type="button" class="btn btn-primary btn-sm" value="添加医籍" id="btnAdd">
                    </td>

                </tr>
            </table>
        </form>
    </div>
    <div id="bookShow">
        <table class="table table-hover">
            <tr class="table-active">
                <td>编号</td>
                <td>作者</td>
                <td>书名</td>
                <td>朝代</td>
                <td>县</td>
                <td>册数</td>
                <td>出版年份</td>
                <td>操作</td>
            </tr>
            <tbody id="tbbook"></tbody>
        </table>
    </div>
</div>
<!--js代码-->
<script>
    $(function() {
        $("#btnQuery").on("click", function() {
            findDoctor(1,4);
        })
        $("#btnAdd").on("click", function() {
            bookAdd();
        })
        $('#bookName').on("change",function (){
            checkBook();
        })
        findBookDesc();
    })

    function findBookDesc() {
        $.get(
            '/book/findBookDesc',
            function(blist) {
                let tb = $("#tbbook");
                tb.empty();
                for (let i in blist) {
                    let tr = `<tr>
                                   <td>${blist[i].bookId} </td>
                                   <td>${blist[i].docName} </td>
                                   <td>${blist[i].bookName} </td>
                                   <td>${blist[i].dynName} </td>
                                   <td>${blist[i].county} </td>
                                   <td>${blist[i].volume} </td>
                                   <td>${blist[i].pubYear} </td>
                                    <td><button type="button" onclick="bookDel(${blist[i].bookId})"
                                    class="btn btn-primary btn-sm" data-toggle="modal" data-target="#docModal">删除</button>
                                    </td>
                                </tr>`;
                    tb.append(tr);
                }
            }, 'json'
        );
    }

    function bookDel(mid) {
        let del=confirm("你真的要删除该医籍么？");
        if(!del){
            return;
        }
        $.get(
            '/book/bookDel', {
                bookId: mid
            },
            function(book) {
                findBookDesc();
            }, 'json'
        );
    }

    function bookAdd() {
        $.post(
            "book/bookAdd",
            $("#bookForm").serialize(),
            function(n) {
                findBookDesc();
            }
        );
    }
</script>

</body>
</html>